<!DOCTYPE html>
<html>
<head>
  <title>circle</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <style type="text/css">
    body{
      margin: 0;
    }
    #container{
      height: 100vh;
      width: 100vw;
    }
    svg {
      position: relative;
      left: 112px;
      top: -169px;
      width: 112px;
      height: 112px;
    }
  </style>
</head>
<body>
<div id="container">
  <canvas id="canvas"></canvas>
  <img src="./money.png"/>
  <img src="./smile.png"/>
  <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56">
  <path fill="#D8D8D8" d="M32.7272727,34.3636364 L32.7417464,34.3636364 C34.54417,34.3636364 36,32.892137 36,31.0769506 L36,18.0139585 C36,16.2031916 34.5412301,14.7272727 32.7417464,14.7272727 L32.7272727,14.7272727 C32.7272727,6.59362467 26.1336481,0 18,0 C9.86635195,0 3.27272727,6.59362467 3.27272727,14.7272727 L3.25825364,14.7272727 C1.4558301,14.7272727 0,16.1987721 0,18.0139585 L0,31.0769506 C0,32.8877175 1.45876984,34.3636364 3.25825364,34.3636364 L3.27272727,34.3636364 C3.27272727,35.2736758 4.0005152,36 4.89828711,36 L31.1017129,36 C31.9991788,36 32.7272727,35.267375 32.7272727,34.3636364 Z" transform="translate(10.000000, 10.000000)"/>
</svg>

</div>
<script type="text/javascript" src="../lib/weRender.min.js"></script>
<script type="text/javascript" src="./seatCanvas.js"></script>

<script type="text/javascript">
var WeStage = weRender.WeStage;
var WeCanvas = weRender.WeCanvas;

var stage = new WeStage(document.querySelector("#canvas"));
stage.setSize(500, 500);
stage.setStyle("500px", "500px");

window.onload = function(){
  var money = new Image();
  money.src = "./money.png";
  var smile = new Image();
  smile.src = "./smile.png";

  var scale = 2;

  var money = getSeatCanvas(scale, "#EF595D", "money", money);
  var smile = getSeatCanvas(scale, "#5A51A2", "smile", smile);
  var normal = getSeatCanvas(scale, "#FF9700");
  var seats = [normal, money, smile];
  var width = 56
  var maxRow = Math.floor(500 / width);
  var maxCol = Math.floor(500 / width);

  for (var i = 0; i < maxRow; i++) {
    for (var j = 0; j < maxCol; j++) {
      stage.addChild({
        canvas: seats[(i * j) % 3].canvas,
        x: j * width * scale,
        y: i * width * scale
      })
    }
  }
  stage.update()
}

</script>
</body>
</html>
